<template>
  <div class="app-container">
    <el-form :inline="true" :model="pageInfo" class="demo-form-inline">
      <el-form-item label="渠道名称" :label-width="formLabelWidth">
        <el-input v-model="pageInfo.tradeQudao" autocomplete="off" />
      </el-form-item>
      <el-form-item label="交易结果" :label-width="formLabelWidth">
        <el-select v-model="pageInfo.tradeResult" placeholder="请选择">
          <el-option label="处理中" value="1" />
          <el-option label="成功" value="2" />
          <el-option label="失败" value="3" />
        </el-select>
      </el-form-item><br>
      <el-form-item label="对账批次" :label-width="formLabelWidth">
        <el-input v-model="pageInfo.batchbdNo" autocomplete="off" />
      </el-form-item>
      <el-form-item label="交易金额" :label-width="formLabelWidth">
        <el-input v-model="pageInfo.amount" autocomplete="off" />
      </el-form-item><br>
      <el-form-item label="是否差错" :label-width="formLabelWidth">
        <el-select v-model="pageInfo.hasDiff" placeholder="请选择">
          <el-option label="否" value="0" />
          <el-option label="是" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="交易日期">
        <el-date-picker
          v-model="pageInfo.t1"
          type="date"
          placeholder="选择日期"
        />
        至
        <el-date-picker
          v-model="pageInfo.t2"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item><br>
      <el-form-item label="处理结果" :label-width="formLabelWidth">
        <el-select v-model="pageInfo.processState" placeholder="请选择">
          <el-option label="未处理" value="1" />
          <el-option label="要结算" value="2" />
          <el-option label="不结算" value="3" />
          <el-option label="已处理" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" :label-width="formLabelWidth">
        <el-select v-model="pageInfo.payWay" placeholder="请选择">
          <el-option label="微信扫码" value="1" />
          <el-option label="支付宝扫码" value="2" />
          <el-option label="微信公众号" value="3" />
          <el-option label="认证支付" value="4" />
          <el-option label="代付到银行卡" value="5" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="batchNo"
          label="对账批次"
          width="180"
        />
        <el-table-column
          prop="payOrderNo"
          label="交易流水号"
          width="180"
        />
        <el-table-column
          prop="qudaoOrderNo"
          label="渠道订单号"
          width="180"
        />
        <el-table-column
          prop="tradeQudao"
          label="渠道名称"
          width="180"
        />
        <el-table-column
          prop="tradeResult"
          label="交易结果"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.tradeResult==1">处理中</span>
            <span v-if="scope.row.tradeResult==2">成功</span>
            <span v-if="scope.row.tradeResult==3">失败</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="交易金额"
          width="180"
        />
        <el-table-column
          prop="tradeDateZf"
          label="交易日期"
          width="180"
        />
        <el-table-column
          prop="commissionFee"
          label="手续费"
          width="180"
        />
        <el-table-column
          prop="payWay"
          label="支付方式"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.payWay==1">微信扫码</span>
            <span v-if="scope.row.payWay==2">支付宝扫码</span>
            <span v-if="scope.row.payWay==3">微信公众号</span>
            <span v-if="scope.row.payWay==4">认证支付</span>
            <span v-if="scope.row.payWay==5">代付到银行卡</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tradeAccount"
          label="交易账号"
          width="180"
        />
        <el-table-column
          prop="tradeAccountType"
          label="交易账户类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.tradeAccountType==1">微信</span>
            <span v-if="scope.row.tradeAccountType==2">支付宝</span>
            <span v-if="scope.row.tradeAccountType==3">银行卡</span>
            <span v-if="scope.row.tradeAccountType==4">拉卡拉</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkEndDate"
          label="对账完成时间"
          width="180"
        />
        <el-table-column
          prop="hsaDiff"
          label="是否差错"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hsaDiff==0">否</span>
            <span v-if="scope.row.hsaDiff==1">是</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="processState"
          label="处理结果"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.processState==1">未处理</span>
            <span v-if="scope.row.processState==2">要结算</span>
            <span v-if="scope.row.processState==3">不结算</span>
            <span v-if="scope.row.processState==4">已处理</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="findOne(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      pageInfo: {
        region:null,
        tradeQudao:null,
        t1: null,
        t2: null,
        batchbdNo:null,
        amount:null,
        hasDiff:null,
        processState:null,
        payWay:null
      },
      total: null,
      form: {
        id: '',
        batchNo: '',
        payOrderNo: '',
        qudaoOrderNo: '',
        tradeQudao: '',
        tradeResult: '',
        amount: '',
        tradeDateZf: '',
        commissionFee: '',
        tradeAccount: '',
        tradeAccountType: '',
        checkEndDate: '',
        hsaDiff: '',
        processState: ''
      }
    }
  },
  created() {
    this.list()
  },
  methods: {
    list() {
      this.axios.get('http://localhost:80/api/cw/wish/t-cw-check-batch-detail/selects', { params: this.pageInfo }).then((response) => {
        console.log(response.data)
        this.tableData = response.data.obj
      })
    },
    onSubmit() {
      console.log('submit!')
      this.list()
    }
  }
}
</script>

<style scoped>

</style>
